<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- hidden 就是隐藏的意思 -->
	<input type="file" hidden>
	<!-- <input type="file"> -->
	<img width="100" src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1950846641,3729028697&fm=26&gp=0.jpg" alt="">
	<script>
		// 点击图片 触发input 文件域 file文件选择
		const ipt = document.querySelector('input')
		const img = document.querySelector('img')
		// 点击图片触发input的click事件就可以
		img.onclick = () => {
			ipt.click()
		}

		// 使用file文件域选择的文件上传到哪里了??? 怎么知道文件域选择文件了
		// 1. input的值被修改了, 会触发change事件,
		// 2. 在change事件中可以获取到上传文件的信息 e.target.files(集合)[0]
		// 3. change事件触发,为了解决上传重复的图像都能触发change事件, 上传完毕后, 将value清空
		ipt.addEventListener('change',function(e){
			console.log(e.target.files); // 上传的文件
			const file = e.target.files[0]
			const arr = ["image/gif", "image/png","image/jpg"]
			// 文件类型处理
			if (!arr.includes(file.type)) {
				return	console.log('上传图像只能是png/jpg/gif格式');
			}
			// 字节 1K是1024个字节  1024k = 1M  1024M = 1G
			if(file.size > 1024 * 20) {
			 return	console.log('上传文件过大');
			}
			// 发送请求 上传头像业务
			// xxxx
			// 保证两次上传同一张图片会触发change事件
			e.target.value = ''
		})


	</script>
</body>
</html>